Get started with Elfsight Portfolio 1.0.0

Installation

1. Install Elfsight Portfolio WordPress Plugin elfsight-portfolio-cc.zip to your website. Don't know how? Please learn here.

2. Go to Portfolio page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

Use Portfolio as a WordPress Shortcode



1. Create a new widget

You can use Elfsight Portfolio as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Portfolio shortcode:

[elfsight_portfolio id="1"]

Use Portfolio as a Gutenberg Block

You can use Elfsight Portfolio as a block for Gutenberg editor. Just add it to your page during page building and select one of the available Portfolio widgets from the list.

Use Portfolio as a WordPress Widget

To use Elfsight Portfolio as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Portfolio WordPress widget to any widget section. Next, select one of available Portfolio widgets from the list.

Use Portfolio as a Visual Composer Element

You can use Elfsight Portfolio as a Visual Composer element. Just add it to your page during page building and select one of the available Portfolio widgets from the list.

Options

Option Default Value Description
Content
Projects - Add projects to your portfolio.
Projects: Pictures & Videos - Add pictures and videos to your project. The first picture you upload will be used as your project's default preview, unless you specifically set the preview picture option. The other images can be viewed in a popup window when you click on the project in the list.
Projects: Preview Picture - Set a picture for the project's preview. The preview will be displayed in projets list. Tip: We recommend to use a smaller image for preview, to improve loading speed and performance.
Projects: Name - Enter the project's name.
Projects: Category - Choose a category for the project.
Projects: Description - Describe your project.
Projects: Project Details - Enter short information about the project - Date, Client, etc.
Projects: Website - Set the project's website URl, if available.
Enable Categories true Activate this option to group your projects by categories.
Categories - Create your categories.
Categories: Name - Set the category name.
Widget Title - Set the widget's title to be displayed above the portfolio.
Author: Where to display author Above projects, in popup Select places in your portfolio where you want to feature the author.
Author: Name - Enter the author's name.
Author: Bio - Add the author's short bio.
Author: Photo - Upload the author's photo.
Author: Email - Enter the author's email to let people contact them directly.
Author: Phone - Enter the author's phone to let people contact them directly.
Author: Social Profiles - Add links to the author's social media accounts.
Call to Action: Where to Display Above projects, in popup Select places in your portfolio where you want to encourage your target visitors to perform an action, for example, to contact you or to order a project.
Call to Action: Button Text Hire me Set the call to action button text.
Call to Action: Button Link - Set the call to action button link.
Language en Choose your portfolio's language.
Layout
Layout masonry Select the portfolio layout.
Grid: Columns 3 Set the number of columns.
Grid: Rows 3 Set the number of rows.
Grid: Gutter 10 Set the spaces between the projects in pixels.
Grid: Preferred Image Shape Landscape (3:2) Select the display ratio for the images in your portfolio - landscape, square, portrait.
Grid: Number of Columns on Tablets 2 Set the number of columns for tablets.
Grid: Number of Columns on Mobiles 1 Set the number of columns for mobiles.
Masonry: Columns 3 Set the number of columns.
Masonry: Gutter 10 Set the spaces between the projects in pixels.
Masonry: Projects per page 8 Set the number of projects to be displayed before the load more button.
Masonry: Number of Columns on Tablets 2 Set the number of columns for tablets.
Masonry: Number of Columns on Mobiles 1 Set the number of columns for mobiles.
List: Gutter 10 Set the spaces between the projects in pixels.
List: Projects per page 8 Set the number of projects to be displayed before the load more button.
List: Preferred Image Shape Landscape (3:1) Select the display ratio for the images in your portfolio - landscape, square, original shape.
Width (px, %, auto) auto Set the widget width in pixels. Or set "auto" to make it full width.
Project
Project View Overlay Select the right view for your project.
Project Info to Display Name, Details, Category Choose the project info you need to display in the list.
Action on Project Click Open Detailed info in Popup Choose an action that will happen when you click on a project in the list.
Info to display in Popup Name, Description, Details, Category, Website Choose the project info to display in the popup.
Style
Background Color - Set the portfolio background color.
Text Color rgb(17, 17, 17) Set the portfolio text color.
Call to Action Button Color rgb(28, 59, 255) Set call to action button color.
Links Color rgb(28, 59, 255) Set the links color.
Project Overlay Color rgba(17, 17, 17, 0.7) Set project overlay color.
Project Background Color - Set project background color.
Project Text Color - Set project text color.
Popup Background Color rgb(255, 255, 255) Set popup background color.
Popup Text Color rgb(17, 17, 17) Set popup text color.
Popup Overlay Color rgba(17, 17, 17, 0.9) Set popup overlay color.
Popup Call to Action Color rgb(28, 59, 255) Set popup call to action button color.
Popup Links Color rgb(28, 59, 255) Set the links color in popup.
Popup Text Alignment Left Set text alignment in popup.

Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center